<template>
  <view class="all-task-list">
    <view class="button-bar">
      <button
        v-for="tab in TabBars"
        :key="tab.type"
        :class="tab.type === activeTabType ? 'btn active' : 'btn'"
        @tap="changeTab(tab.type)"
      >
        <text>{{ tab.title }}</text>
      </button>
    </view>
    <view class="task-list">
      <view
        v-for="task in activeTaskList"
        :key="task.id"
        class="task-card"
        :class="task.isRecord ? 'checked' : ''"
        @tap="viewTaskDetail(task)"
      >
        <view class="sub-title">
          <text>
            <!-- {{ cardSubTitle }} -->
          </text>
          <view v-show="task.isRecord" class="at-icon at-icon-check-circle task-check" />
        </view>
        <view class="content-wrap">
          <text class="title">{{ task.title }}</text>
          <text>{{ task.score }}积分</text>
        </view>
        <image class="taskImage" :src="task.imageUrl || testImage" />
      </view>
    </view>
    <at-modal :isOpened="isOpenDialog" :onClose="handleClose">
      <at-modal-content>
        <view class="task-dialog-content">
          <text class="tip-title">成功添加</text>
          <text class="tip-message">从今天开始要每日坚持打卡</text>
          <text class="title">{{ addSuccessTask.title }}</text>
          <image
            class="task-modal-image"
            :src="addSuccessTask.imageUrl || testImage"
          />
        </view>
      </at-modal-content>
      <at-modal-action>
        <button class="btn-know" @tap="handleClose">我知道了</button>
      </at-modal-action>
    </at-modal>
  </view>
</template>

<script lang="ts">
import "./index.less";
import Taro from "@tarojs/taro";
import { AtModal, AtModalContent, AtModalAction } from "taro-ui-vue";
import { getAllTaskList } from "../../../services/task-service";
import { TAB_TYPE, TAB_TITLE } from "./interface";
import testImage from "../../../assets/images/tasktest.jpg";

export default {
  components: {
    atModal: AtModal,
    atModalContent: AtModalContent,
    atModalAction: AtModalAction,
  },
  data() {
    return {
      TabBars: [
        {
          type: TAB_TYPE.FOOD,
          title: TAB_TITLE.FOOD,
        },
        {
          type: TAB_TYPE.SPORTS,
          title: TAB_TITLE.SPORTS,
        },
        {
          type: TAB_TYPE.HEALTH,
          title: TAB_TITLE.HEALTH,
        },
        {
          type: TAB_TYPE.BODY,
          title: TAB_TITLE.BODY,
        },
      ],
      activeTabType: TAB_TYPE.FOOD,
      activeTaskList: [],
      allTaskList: [],
      addSuccessTask: { title: "", imageUrl: "" },
      isOpenDialog: false,
      testImage,
    };
  },
  methods: {
    async getTaskList() {
      this.allTaskList = await getAllTaskList();
    },
    changeTab(tabType: string) {
      this.activeTabType = tabType;
      this.activeTaskList = this.allTaskList.filter(
        (task) => task.type === tabType
      );
    },
    viewTaskDetail(task) {
      this.$store.commit("setViewTaskDetail", task);
      Taro.navigateTo({
        url: "/pages/tasks/task-intro/index",
      });
    },
    async updateTaskChecked() {
      await this.getTaskList();
      this.changeTab(this.activeTabType);
    },
    updateAddSuccessTask(addSuccessTask) {
      if (addSuccessTask) {
        this.addSuccessTask = addSuccessTask;
      } else {
        this.addSuccessTask = { title: "", imageUrl: "" };
      }
    },
    clearStore() {
      this.$store.commit("setViewTaskDetail", null);
      this.$store.commit("setCreatedDailySuccessTask", null);
    },
    handleClose() {
      this.isOpenDialog = false;
    },
  },
  computed: {
    cardSubTitle() {
      return TAB_TITLE[TAB_TYPE[this.activeTabType]];
    },
  },
  onShow() {
    const { task } = this.$store.state;
    this.updateTaskChecked();
    this.updateAddSuccessTask(task.createdDailySuccessTask);
    if (task.createdDailySuccessTask) {
      this.isOpenDialog = true;
      this.clearStore();
    }
  },
};
</script>
